<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>

	<ul>
		<li id = 'first'>1</li>
		<li>2</li>
		<li id = 'three'>3元素</li>
		<li>4元素</li>
		<li aaa='456'>5元素</li>
		<li>
			<span>666666</span>
			<span>777777</span>
			<span>888888</span>
		</li>
		<span>99999</span>
	</ul>
<script type="text/javascript" src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
	//获取子代元素
	$('ul').children('span').css('background','red')
	//后代选择器
	$('ul').find('span').css('font-size','30px')

	//选出除了自己以外的所有兄弟节点
	$('#first').siblings().css('color','green')

	//获取下一个兄弟节点
	$('#first').next().css('font-weight','700')

	//获取上一个兄弟节点
	$('#three').prev().css('background','pink')
	//获取父节点
	$('#three').parent().css('border','1px solid #000')

	//jq不需要循环
	console.log($('li'))
	$('li').click(function() {
		console.log(this)//获取当前的元素
		console.log($(this).index()) //获取当前点击的下标
	})
</script>
</body>
</html>